<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown转换器</title>
    <link th:href="@{/css/upload-form.css}" rel="stylesheet">
    <link href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/bootstrap/5.3.0/css/bootstrap.min.css"
          rel="stylesheet">
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/bootstrap/5.3.6/js/bootstrap.bundle.min.js"></script>
</head>
<body>


<!--用Excel转换成Markdown-->
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <!-- 上传表单 -->
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title">Excel转Markdown转换器</h3>
                </div>
                <div class="card-body">
                    <form id="uploadForm" method="post" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="files" class="form-label">选择Excel文件(.xls) - 最多10个</label>
                            <input class="form-control" type="file" id="files" name="files"
                                   accept=".xls" multiple required
                                   onchange="validateFileCount(this)">
                            <small class="form-text text-muted">按住Ctrl键可多选文件</small>
                        </div>
                        <div class="d-flex justify-content-end">  <!-- 修改为justify-content-end -->
                            <div class="button-container">
                                <div style="flex: 1;">
                                    <button type="submit" class="btn btn-primary me-2" id="submitBtn">
                                        <!-- 添加me-2间距 -->
                                        转换为Markdown
                                    </button>
                                </div>
                                <a href="https://jimoai.xiaohuodui.cn/chat/YpmvusUpp1z6vthf" class="btn btn-info"
                                   target="_blank">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                         class="bi bi-search" viewBox="0 0 16 16">
                                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                                    </svg>
                                    去分析
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 结果展示区域 -->
            <div id="resultSection" class="result-section mt-4">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h4 class="card-title">转换结果</h4>
                    </div>
                    <div class="card-body" id="resultsContainer">
                        <!-- 结果将在这里动态生成 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--用PDF转换成Markdown-->
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title">PDF转Markdown转换器</h3>
                </div>
                <div class="card-body">
                    <form id="pdfForm" method="post" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="pdfFiles" class="form-label">选择PDF文件</label>
                            <input class="form-control" type="file" id="pdfFiles" name="files" accept=".pdf" multiple
                                   required
                                   onchange="validateFileCount(this)">
                            <small class="form-text text-muted">按住Ctrl键可多选文件</small>
                        </div>
                        <div class="d-flex justify-content-end">  <!-- 修改为justify-content-end -->
                            <div class="button-container">
                                <div style="flex: 1;">
                                    <button type="submit" class="btn btn-primary me-2" id="submitBtnPDF">
                                        <!-- 添加me-2间距 -->
                                        转换为Markdown
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div id="result" class="mt-4" style="display: none;">
                        <h4>转换结果</h4>
                        <pre id="markdownOutput" class="bg-light p-3"></pre>
                        <button id="copyBtn" class="btn btn-secondary mt-2">复制到剪贴板</button>
                    </div>
                </div>
            </div>

            <!-- 结果展示区域 -->
            <div id="resultSectionPDF" class="result-section mt-4">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h4 class="card-title">转换结果</h4>
                    </div>
                    <div class="card-body" id="resultsContainerPDF">
                        <!-- 结果将在这里动态生成 -->
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--定义当前应用的根路径-->
<script th:inline="javascript">
    // 定义当前应用的basePath
    window.basePath = /*[[@{/}]]*/ '';
    console.log('basePath->', {basePath})
</script>
<script th:src="@{/js/upload-form.js}"></script>
</body>
</html>